<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GM-Vue</title>
    <link type="text/css" rel="stylesheet" href="http://develop.lovejavascript.com/node_modules/gridmanager-vue/css/gm-vue.css"/>
    <link type="text/css" rel="stylesheet" href="./css/common.css"/>
    <script src="http://develop.lovejavascript.com/node_modules/vue/dist/vue.min.js"></script>
    <script src="http://develop.lovejavascript.com/node_modules/gridmanager-vue/js/gm-vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="search-area">
            <div class="sa-ele">
                <label class="se-title">标题:</label>
                <input class="se-con" v-model="searchForm.title"/>
            </div>
            <div class="sa-ele">
                <label class="se-title">博文分类:</label>
                <select class="se-con" v-model="searchForm.type">
                    <option value="-1">请选择</option>
                    <option v-for="item in TYPE_LIST" :value="item.value">{{item.text}}</option>
                </select>
            </div>
            <div class="sa-ele">
                <label class="se-title">内容:</label>
                <input class="se-con" v-model="searchForm.content"/>
            </div>
            <div class="sa-ele">
                <button class="search-action" @click="onSearch()">搜索</button>
                <button class="reset-action" @click="onReset()">重置</button>
            </div>
        </div>
        <div class="grid-main">
            <grid-manager v-bind:option="option" :callback="callback" ref="grid"></grid-manager>
        </div>

        <div class="bottom-bar">
            <a href="https://github.com/baukh789/GridManager-Angular-1.x" target="_blank">查看源码</a>
            <select class="fn-select" v-model="fnSelected" @change="onFnChange(fnSelected)">
                <option value="-1">请选择方法</option>
                <option :value="item.key"
                        v-for="item in GM_PUBLISH_METHOD_MAP"
                        :title="item.title"
                >{{item.key}}</option>
            </select>
            <input class="fn-code" placeholder="请通过选择方法生成所需要执行的代码" v-model="fnCode"/>
            <button class="fn-run" @click="onFnRun()">执行</button>
            <span class="fn-run-info" v-html="fnRunInfo"></span>
        </div>
    </div>
<script src="./js/vue-demo.js"></script>
</body>
</html>




